<template>
    <div class="app-container">
        <!-- <input type="text" autocomplete="off" v-model="asnId" placeholder="do单号">
        <button type="button" @click="fetchActivityOrders">
            <span>查询</span>
        </button>
        <button type="button" @click="research">
            <span>重置</span>
        </button> -->


        <!-- 新建订单 -->
        <el-button type="text" @click="createOrderDialogVisible = true">创建订单</el-button>
        <el-dialog title="创建订单" :visible.sync="createOrderDialogVisible">
            <el-form :model="createOrderForm" label-width="110px">
                <el-form-item label="大可壶小手单">
                    <el-input v-model="createOrderForm.keyAccountOrderId" autocomplete="off" size="mini"></el-input>
                </el-form-item>

                <el-form-item label="潜质仓">
                    <!-- <el-input v-model="createOrderForm.stationId" autocomplete="off" size="mini"></el-input> -->
                    <el-select v-model="createOrderForm.stationId" placeholder="请选择" label="潜质仓">
                        <el-option v-for="item in stationList" :key="item.stationMongoCode" :label="item.stationName"
                            :value="item.stationCode">
                        </el-option>
                    </el-select>
                </el-form-item>



                <el-form-item label="订单履约开始">
                    <el-date-picker v-model="createOrderForm.deliveryStartDate" type="datetime" placeholder="选择日期"
                        value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="订单履约结束">
                    <el-date-picker v-model="createOrderForm.deliveryEndDate" type="datetime" placeholder="选择日期"
                        value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="商品列表">
                    <el-select multiple collapse-tags v-model="createOrderForm.product上品Ids" placeholder="请选择">
                        <el-option v-for="(item, index) in productList" :key="item.mongoId" :label="item.上品Name"
                            :value="item.上品Id">
                            <span class="check">{{ item.上品Name }}</span>
                            <span style="margin-left: 8px">{{ item.label }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="用户类型">
                    <template>
                        <el-radio v-model="createOrderForm.isBigCustom" label="1">大可壶</el-radio>
                        <el-radio v-model="createOrderForm.isBigCustom" label="0">非大可壶</el-radio>
                    </template>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="createUserOrder">立即创建</el-button>
                    <el-button @click="resetUserOrderInfo()">重置</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="createOrderDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="createOrderDialogVisible = false">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 订单信息展示 -->
        <el-table v-loading="listLoading" :data="userOrderKetAccountOrderList" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column label="大可壶小手单号" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.keyAccountOrderId }}</span>
                </template>
            </el-table-column>
            
            <el-table-column label="订单号" width="200">
                <template slot-scope="scope">
                    {{ scope.row.userOrderId }}
                </template>
            </el-table-column>

            <el-table-column label="展点ID" align="center" width="100">
                <template slot-scope="scope">
                    <span>{{ scope.row.stationCode }}</span>
                </template>
            </el-table-column>

            <el-table-column label="展点mongoid" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.stationMongoCode }}</span>
                </template>
            </el-table-column>
            <el-table-column label="履约开始" align="center">
                <template slot-scope="scope">
                    {{ scope.row.deliveryStartDate }}
                </template>
            </el-table-column>

            <el-table-column label="履约结束" align="center">
                <template slot-scope="scope">
                    {{ scope.row.deliveryEndDate }}
                </template>
            </el-table-column>

            <el-table-column label="创建时间" align="center">
                <template slot-scope="scope">
                    {{ scope.row.createTime }}
                </template>
            </el-table-column>
            <el-table-column label="商品明细" align="center">
                <!-- <template slot-scope="scope">
                    <el-button type="text"
                        @click="doOrderProductDetailVisible = true; fetchProductDetail(scope.row.asnId)">查看</el-button>
                </template> -->
            </el-table-column>
        </el-table>


        <el-dialog title="do单商品详情" :visible.sync=" doOrderProductDetailVisible " width="80%" :before-close=" handleClose ">
            <el-table v-loading=" listLoading " :data=" productDetailList " element-loading-text="Loading" border fit
                highlight-current-row>
                <el-table-column align="center" label="序号" width="110">
                    <template slot-scope="scope">
                        {{ scope.$index }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="商品id">
                    <template slot-scope="scope">
                        {{ scope.row.上品Id }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="商品数量">
                    <template slot-scope="scope">
                        {{ scope.row.qty }}
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>





    </div>
</template>
  
<script>
import { adddoOrder } from '@/api/doOrder/doOrder'
import { getdoOrderList } from '@/api/doOrder/doOrder'
import { getProductDetail } from '@/api/doOrder/doOrder'

import { getProducts } from '@/api/activity/activity'
import { getStations } from '@/api/activity/activity'
import { createUserOrder } from '@/api/userOrder/userOrder'
import { getAllUserOrder } from '@/api/userOrder/userOrder'

export default {
    filters: {
        statusFilter(status) {
            const statusMap = {
                published: 'success',
                draft: 'gray',
                deleted: 'danger'
            }
            return statusMap[status]
        }
    },
    data() {
        return {
            list: null,
            listLoading: true,
            dialogVisible: false,
            activityId: "",
            activityOrders: null,
            doOrders: [],
            asnId: "",
            createOrderDialogVisible: false,
            createOrderForm: {
                keyAccountOrderId: "",
                stationId: "",
                deliveryStartDate: '',
                deliveryEndDate: "",
                isBigCustom: "1",
                product上品Ids: []
            },
            productList: [],
            stationList: [],
            doOrderProductDetailVisible: false,
            productDetailList: [],
            userOrderKetAccountOrderList:[]

        }
    },
    created() {
        // this.fetchdoOrderList(),
        this.fetchProducts(),
        this.fetchStations(),
        this.fetchUserOrderKeyAccountOrderList()
    },
    methods: {
        fetchProducts() {
            this.listLoading = true
            getProducts({
                "上品Id": "",
                "上品Name": "",
                "mongoId": ""
            }).then(response => {
                console.log(response)
                this.productList = response.data
                this.listLoading = false
            })
        },
        fetchStations() {
            this.listLoading = true
            getStations({
                "stationCode": null,
                "stationName": null
            }).then(response => {
                console.log(response)
                this.stationList = response.data
                this.listLoading = false
            })
        },
        createUserOrder() {
            createUserOrder({
                "stationId": this.createOrderForm.stationId,
                "product上品Ids": this.createOrderForm.product上品Ids,
                "deliveryStartDate": this.createOrderForm.deliveryStartDate,
                "deliveryEndDate": this.createOrderForm.deliveryEndDate,
                "isBigCustom": this.createOrderForm.isBigCustom,
                "keyAccountOrderId": this.createOrderForm.keyAccountOrderId
            }).then(response =>{
                this.createOrderDialogVisible = false
                this.$message.success(`${response.message}`)
                this.fetchUserOrderKeyAccountOrderList()
            })
        },
        resetUserOrderInfo() {
            this.createOrderForm.stationId = "",
                this.createOrderForm.product上品Ids = "",
                this.createOrderForm.deliveryStartDate = "",
                this.createOrderForm.deliveryEndDate = "",
                this.createOrderForm.keyAccountOrderId = ""

        },
        fetchUserOrderKeyAccountOrderList(){
            getAllUserOrder().then(response =>{
                this.userOrderKetAccountOrderList = response.data
            })
        },
        addHandle() {
            this.createOrderForm.上品QtyList.push({
                上品Id: '',
                qty: '',
            })
        },
        deleteHandle(i) {
            this.createOrderForm.上品QtyList.splice(i, 1)
        },
        // fetchdoOrderList() {
        //     this.listLoading = true
        //     getdoOrderList({
        //         "asnId": ""
        //     }
        //     ).then(response => {
        //         console.log(response)
        //         this.doOrders = response.data
        //         this.listLoading = false
        //     })
        // },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        research() {
            this.activityId = ""
            this.fetchActivityOrders()
        },
        fetchProductDetail(asnId) {
            getProductDetail({
                "asnId": asnId
            }).then(response => {
                console.log(response)
                this.productDetailList = response.data
            })
        }

    }
}
</script>
  
<style></style>